<script setup lang="ts">
import { ref, watch } from 'vue'

interface LogoConfig {
  text: string
  width: number
  height: number
  fontSize: number
  fontFamily: string
  textColor: string
  backgroundColor: string
  isTransparent: boolean
  padding: number
  borderRadius: number
  shadow: boolean
  shadowColor: string
  shadowBlur: number
}

const config = ref<LogoConfig>({
  text: 'Logo',
  width: 300,
  height: 100,
  fontSize: 48,
  fontFamily: 'Arial',
  textColor: '#ffffff',
  backgroundColor: '#3b82f6',
  isTransparent: false,
  padding: 20,
  borderRadius: 10,
  shadow: true,
  shadowColor: 'rgba(0,0,0,0.3)',
  shadowBlur: 10
})

const fontFamilies = [
  'Arial',
  'Helvetica',
  'Times New Roman',
  'Georgia',
  'Verdana',
  'Impact'
]

const presetSizes = [
  { name: '标准Logo', width: 300, height: 100 },
  { name: '方形Logo', width: 200, height: 200 },
  { name: '网站图标', width: 32, height: 32 },
  { name: '社交媒体', width: 500, height: 500 }
]

const canvas = ref<HTMLCanvasElement | null>(null)
const downloadLink = ref<string>('')
const faviconLink = ref<string>('')

const drawLogo = () => {
  if (!canvas.value) return
  
  const ctx = canvas.value.getContext('2d')
  if (!ctx) return

  // 设置画布尺寸
  canvas.value.width = config.value.width
  canvas.value.height = config.value.height

  // 清空画布（使用透明背景）
  ctx.clearRect(0, 0, config.value.width, config.value.height)

  // 绘制背景（如果不是透明的）
  if (!config.value.isTransparent) {
    ctx.fillStyle = config.value.backgroundColor
    if (config.value.borderRadius > 0) {
      roundRect(
        ctx,
        0,
        0,
        config.value.width,
        config.value.height,
        config.value.borderRadius
      )
      ctx.fill()
    } else {
      ctx.fillRect(0, 0, config.value.width, config.value.height)
    }
  }

  // 设置文字样式
  ctx.font = `${config.value.fontSize}px ${config.value.fontFamily}`
  ctx.fillStyle = config.value.textColor
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'

  // 添加阴影
  if (config.value.shadow) {
    ctx.shadowColor = config.value.shadowColor
    ctx.shadowBlur = config.value.shadowBlur
    ctx.shadowOffsetX = 2
    ctx.shadowOffsetY = 2
  }

  // 绘制文字
  ctx.fillText(
    config.value.text,
    config.value.width / 2,
    config.value.height / 2
  )

  // 重置阴影
  ctx.shadowColor = 'transparent'
  ctx.shadowBlur = 0
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0

  // 更新下载链接
  downloadLink.value = canvas.value.toDataURL('image/png')
}

// 绘制圆角矩形
const roundRect = (
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  width: number,
  height: number,
  radius: number
) => {
  ctx.beginPath()
  ctx.moveTo(x + radius, y)
  ctx.lineTo(x + width - radius, y)
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
  ctx.lineTo(x + width, y + height - radius)
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
  ctx.lineTo(x + radius, y + height)
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
  ctx.lineTo(x, y + radius)
  ctx.quadraticCurveTo(x, y, x + radius, y)
  ctx.closePath()
}

// 生成网站图标
const generateFavicon = () => {
  const faviconCanvas = document.createElement('canvas')
  faviconCanvas.width = 32
  faviconCanvas.height = 32
  
  const ctx = faviconCanvas.getContext('2d')
  if (!ctx) return

  // 清空画布（使用透明背景）
  ctx.clearRect(0, 0, 32, 32)

  // 绘制背景（如果不是透明的）
  if (!config.value.isTransparent) {
    ctx.fillStyle = config.value.backgroundColor
    ctx.fillRect(0, 0, 32, 32)
  }

  // 设置文字样式
  ctx.font = '20px ' + config.value.fontFamily
  ctx.fillStyle = config.value.textColor
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'

  // 绘制文字
  ctx.fillText(config.value.text.charAt(0), 16, 16)

  // 生成图标链接
  faviconLink.value = faviconCanvas.toDataURL('image/png')
}

// 应用预设尺寸
const applyPresetSize = (width: number, height: number) => {
  config.value.width = width
  config.value.height = height
  
  // 调整字体大小以适应新尺寸
  config.value.fontSize = Math.min(width, height) * 0.4
}

// 监听配置变化，重新绘制
watch(
  () => config.value,
  () => {
    drawLogo()
    generateFavicon()
  },
  { deep: true }
)

// 初始化
drawLogo()
generateFavicon()
</script>

<template>
  <div class="max-w-6xl p-4 mx-auto">
    <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
      <!-- 预览区域 -->
      <div class="space-y-6">
        <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
          <h2 class="mb-4 text-xl font-bold">Logo预览</h2>
          <div class="flex justify-center">
            <canvas
              ref="canvas"
              class="max-w-full border rounded-lg dark:border-gray-600"
            ></canvas>
          </div>
        </div>

        <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
          <h2 class="mb-4 text-xl font-bold">网站图标预览</h2>
          <div class="flex items-center justify-center space-x-4">
            <img
              :src="faviconLink"
              alt="Favicon"
              class="w-8 h-8 border dark:border-gray-600"
            >
            <span class="text-sm text-gray-600 dark:text-gray-400">
              32x32 像素
            </span>
          </div>
        </div>

        <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
          <h2 class="mb-4 text-xl font-bold">下载</h2>
          <div class="flex flex-col space-y-4">
            <a
              :href="downloadLink"
              download="logo.png"
              class="px-4 py-2 text-center text-white transition-colors bg-blue-500 rounded-lg hover:bg-blue-600"
            >
              下载Logo (PNG)
            </a>
            <a
              :href="faviconLink"
              download="favicon.ico"
              class="px-4 py-2 text-center text-white transition-colors bg-green-500 rounded-lg hover:bg-green-600"
            >
              下载网站图标
            </a>
          </div>
        </div>
      </div>

      <!-- 配置区域 -->
      <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <h2 class="mb-6 text-xl font-bold">Logo设置</h2>
        
        <div class="space-y-6">
          <!-- 预设尺寸 -->
          <div class="space-y-2">
            <label class="block text-sm font-medium">预设尺寸</label>
            <div class="grid grid-cols-2 gap-2">
              <button
                v-for="size in presetSizes"
                :key="size.name"
                @click="applyPresetSize(size.width, size.height)"
                class="px-3 py-2 text-sm transition-colors bg-gray-100 rounded dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600"
              >
                {{ size.name }} ({{ size.width }}x{{ size.height }})
              </button>
            </div>
          </div>

          <!-- 基本设置 -->
          <div class="space-y-4">
            <div>
              <label class="block mb-1 text-sm font-medium">文字内容</label>
              <input
                v-model="config.text"
                type="text"
                class="w-full px-3 py-2 bg-white border rounded-lg dark:border-gray-600 dark:bg-gray-700"
              >
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block mb-1 text-sm font-medium">宽度 (px)</label>
                <input
                  v-model.number="config.width"
                  type="number"
                  min="32"
                  class="w-full px-3 py-2 bg-white border rounded-lg dark:border-gray-600 dark:bg-gray-700"
                >
              </div>
              <div>
                <label class="block mb-1 text-sm font-medium">高度 (px)</label>
                <input
                  v-model.number="config.height"
                  type="number"
                  min="32"
                  class="w-full px-3 py-2 bg-white border rounded-lg dark:border-gray-600 dark:bg-gray-700"
                >
              </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block mb-1 text-sm font-medium">字体大小 (px)</label>
                <input
                  v-model.number="config.fontSize"
                  type="number"
                  min="12"
                  class="w-full px-3 py-2 bg-white border rounded-lg dark:border-gray-600 dark:bg-gray-700"
                >
              </div>
              <div>
                <label class="block mb-1 text-sm font-medium">字体</label>
                <select
                  v-model="config.fontFamily"
                  class="w-full px-3 py-2 bg-white border rounded-lg dark:border-gray-600 dark:bg-gray-700"
                >
                  <option v-for="font in fontFamilies" :key="font" :value="font">
                    {{ font }}
                  </option>
                </select>
              </div>
            </div>
          </div>

          <!-- 样式设置 -->
          <div class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block mb-1 text-sm font-medium">文字颜色</label>
                <input
                  v-model="config.textColor"
                  type="color"
                  class="w-full h-10 rounded-lg"
                >
              </div>
              <div>
                <label class="block mb-1 text-sm font-medium">背景颜色</label>
                <div class="space-y-2">
                  <input
                    v-model="config.backgroundColor"
                    type="color"
                    class="w-full h-10 rounded-lg"
                    :disabled="config.isTransparent"
                  >
                  <label class="flex items-center space-x-2">
                    <input
                      v-model="config.isTransparent"
                      type="checkbox"
                      class="rounded"
                    >
                    <span class="text-sm">透明背景</span>
                  </label>
                </div>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block mb-1 text-sm font-medium">内边距 (px)</label>
                <input
                  v-model.number="config.padding"
                  type="number"
                  min="0"
                  class="w-full px-3 py-2 bg-white border rounded-lg dark:border-gray-600 dark:bg-gray-700"
                >
              </div>
              <div>
                <label class="block mb-1 text-sm font-medium">圆角 (px)</label>
                <input
                  v-model.number="config.borderRadius"
                  type="number"
                  min="0"
                  class="w-full px-3 py-2 bg-white border rounded-lg dark:border-gray-600 dark:bg-gray-700"
                >
              </div>
            </div>

            <div>
              <label class="flex items-center space-x-2">
                <input
                  v-model="config.shadow"
                  type="checkbox"
                  class="rounded"
                >
                <span class="text-sm font-medium">启用阴影</span>
              </label>
            </div>

            <div v-if="config.shadow" class="grid grid-cols-2 gap-4">
              <div>
                <label class="block mb-1 text-sm font-medium">阴影颜色</label>
                <input
                  v-model="config.shadowColor"
                  type="color"
                  class="w-full h-10 rounded-lg"
                >
              </div>
              <div>
                <label class="block mb-1 text-sm font-medium">阴影模糊 (px)</label>
                <input
                  v-model.number="config.shadowBlur"
                  type="number"
                  min="0"
                  class="w-full px-3 py-2 bg-white border rounded-lg dark:border-gray-600 dark:bg-gray-700"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 